/**
 * Created by Ysssssss on 2021/4/22.
 */
import React from 'react'
import {CheckOutlined} from "@ant-design/icons";

const CustomizeSteps = props => {
    const { current, children } = props

    return (
        <div className="flex-vertical-top">
            { Array.isArray(children) ? React.Children.map(children, (child, index) => {
                return React.cloneElement(child, {
                    number: index + 1,
                    current,
                    key: `step-${index}`
                });
            }) : React.cloneElement(children, {
                number: index + 1,
                current
            }) }
        </div>
    )
}
export default CustomizeSteps

export const CustomizeStep = props => {
    const { current, number, children } = props
    const isActive = number < current

    return (
        <div className={`order-status-step ${isActive ? 'active' : (number === current ? 'current' : 'inactive')}`}>
            <div className="step-line">
                { isActive ? (
                    <div className="step-icon">
                        <CheckOutlined />
                    </div>
                ) : (
                    <div className="step-icon">{number}</div>
                ) }
            </div>
            { children }
        </div>
    )
}

export const OrderStatusSteps = props => {
    const { stepList, current } = props
    return (
        <CustomizeSteps current={current}>
            { stepList.map(({ statusStr, time }, index) => (
                <CustomizeStep key={`step_${index}`}>
                    <div className="step-line ft-clr-md ft-14 mgt-8">
                        { statusStr }
                    </div>
                    { time ? (
                        <div className="step-line ft-clr-ml ft-12">
                            { time }
                        </div>
                    ) : null }
                </CustomizeStep>
            )) }
        </CustomizeSteps>
    )
}
